<template>
	<div class="loginregister_container" v-loading="loading" style="--primary: #4361ee">
		<img class="bg" :src="loginBackground" v-if="!!loginBackground" />
		<div class="login_body">
			<div class="leftbox">
				<div class="logo"><img :src="logoUrl" v-if="!!logoUrl" /></div>
				<div class="img"><img src="~@/assets/img/login.svg" alt="" /></div>
			</div>
			<div class="rightbox">
				<router-view></router-view>
				<div class="copyright">{{ siteInfo.field4 }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
export default {
	data() {
		return {
			loading: false,
			logoUrl: '',
			loginBackground: ''
		};
	},
	computed: {
		...mapGetters(['siteInfo'])
	},
	mounted() {
		this.initializeLoginPage();
	},
	methods: {
		...mapActions(['getFileUrl']),
		//初始化登录页面
		async initializeLoginPage() {
			this.loading = true;
			if (!!this.siteInfo.field8) {
				this.logoUrl = await this.getFileUrl(this.siteInfo.field8);
			}
			if (!!this.siteInfo.field1) {
				this.loginBackground = await this.getFileUrl(this.siteInfo.field1);
			}
			this.loading = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.loginregister_container {
	position: relative;
	width: 100vw;
	height: 100vh;
	padding: 90px 6%;
	box-sizing: border-box;
	img.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		object-fit: cover;
	}
}

.login_body {
	display: flex;
	justify-content: space-between;
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 2;
	border-radius: 8px;
	backdrop-filter: blur(15px);
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
	overflow: hidden;

	&::before,
	&::after {
		position: absolute;
		top: 0;
		height: 100%;
		content: '';
		transform: skewX(14deg);
		z-index: 1;
	}

	&::before {
		left: -95px;
		width: calc(50% + 95px);
		background-image: linear-gradient(225deg, #ef1262, #4361ee);
	}

	&::after {
		left: calc(50% + 16px);
		width: 100px;
		background-image: linear-gradient(to right, rgba(67, 97, 238, 0.15) 0%, rgba(67, 97, 238, 0.1) 6%, rgba(67, 97, 238, 0) 50%);
	}

	.leftbox,
	.rightbox {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 2;
	}

	.leftbox {
		width: 50%;
		justify-content: space-around;

		.logo,
		.img {
			position: relative;
			z-index: 2;
			margin: 0 auto;
			padding-right: 60px;
		}

		.logo {
			width: 430px;

			img {
				height: 72px;
			}
		}

		.img {
			width: 430px;
			height: 430px;

			img {
				display: block;
				width: 100%;
				height: 100%;
				margin-left: -40px;
				object-fit: cover;
			}
		}
	}

	.rightbox {
		width: 30%;
		margin-right: 120px;
		justify-content: space-between;

		.header {
			h2 {
				color: #4361ee;
				font-size: 36px;
				line-height: 1.5em;
			}

			p {
				color: #888ea8;
				font-size: 16px;
				line-height: 1.5em;
				font-weight: bold;
			}
		}

		.el-form {
			padding: 32px 0 1px;
			.el-button {
				width: 100%;
				border: none;
				font-size: 18px;
				margin-top: 12px;
				box-shadow: 0 5px 10px rgba(67, 97, 238, 0.3);
				background-image: linear-gradient(90deg, #ef1262, #4361ee);

				&:hover {
					background-image: linear-gradient(90deg, #4361ee, #ef1262);
				}
			}
		}

		.copyright {
			padding: 16px 0;
			flex-shrink: 0;
			text-align: center;
		}
		.el-form-item__label {
			line-height: 1;
			font-weight: bold;
			margin-bottom: 10px;

			&::before {
				display: none;
			}
		}

		.el-input__prefix {
			left: 10px;
		}

		.el-input__inner {
			font-size: 16px;
			padding-left: 36px;
		}

		.el-divider {
			margin: 12px 0;
			background-color: #e0e6ed;
		}

		.box {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: 16px;
		}
	}
}
</style>
